<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:500px;
				height:500px;
				border:1px solid red;
			}
		</style>
		<script>
			window.onload = function(){
				var cavBox = document.getElementById("cav");
				var ocav = cavBox.getContext('2d');
				var deg = 0;
				var timer = setInterval(rotate,20);
				function rotate(){
					deg++;
					ocav.clearRect(0,0,500,500);
					ocav.save();
//					将画布平移到200,200的位置,这样画布起点就变到200,200
					ocav.translate(200,200);
//					将画布旋转30度
					ocav.rotate(deg*Math.PI/180);
	//				将画布平移 小方块宽度和高度的一半,这样小方块就能以200,200为中心旋转30度
					ocav.translate(-50,-50);
	//				绘制旋转后的小方块
					ocav.fillRect(0,0,100,100);
					ocav.restore();
				}
//				
				
			}
		</script>
	</head>
	<body>
		<div id="box">
			<canvas id="cav" width="500" height="500"></canvas>	
		</div>

	</body>
</html>
